<!doctype html>
<html lang="ja"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>要件定義書から、自分の Claude でアプリをつくる｜SOUZOH SPECS</title>
<meta name="description" content="ソウゾウが制作したアプリの要件定義書と、それを使って自分の Claude Code でアプリをつくる手順・プロンプトをまとめています。">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500;700;900&family=Noto+Sans+JP:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap">
<style>:root{--gpt:#10a37f;--gpt-tint:#e9f7f2;--code-bg:#16181c;--code-ink:#e8e9eb;--accent:#fd5c02;--accent-strong:#cc4a00;--accent-tint:#fef4ec;--ink:#1f2328;--sub:#5b6169;--line:#ecedef;--line-strong:#dcdee2;--page:#fff;--soft:#f7f7f8;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font:15px/1.8 "Noto Sans JP",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding-inline:20px}
.top{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);z-index:5}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand span{display:flex;flex-direction:column;line-height:1.1;font-family:"Zen Kaku Gothic New",sans-serif}
.brand b{font-size:15px;letter-spacing:.04em}.brand small{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--accent)}
.nav{display:flex;gap:18px}.nav a{font-size:13px;font-weight:700;text-decoration:none;color:var(--sub)}.nav a:hover{color:var(--accent)}
@media (max-width:520px){.nav .ext{display:none}.nav{gap:14px}}
.eyebrow{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--accent)}
.hero{padding:64px 0 28px}
.hero h1{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:clamp(32px,6vw,48px);line-height:1.2;margin:8px 0 16px}
.lead{color:var(--sub);max-width:640px;margin:0}
.count{margin:20px 0 0;font-size:13px;color:var(--sub)}
.cat{margin:40px 0}
.cat h2{font-family:"Zen Kaku Gothic New",sans-serif;font-size:20px;display:flex;align-items:baseline;gap:10px;margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cat h2 span{font-size:13px;color:var(--sub);font-weight:500}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.card{border:1px solid var(--line-strong);border-radius:14px;display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s}
.card:hover{border-color:var(--accent);box-shadow:0 4px 18px rgba(253,92,2,.08)}
.card-main{flex:1;padding:20px 20px 12px;text-decoration:none}
.card h3{margin:0 0 6px;font-size:17px;font-family:"Zen Kaku Gothic New",sans-serif}
.card p{margin:0;color:var(--sub);font-size:14px;line-height:1.7}
.tags{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.tags li{font-size:12px;background:var(--soft);border-radius:999px;padding:1px 10px;color:var(--sub)}
.card-foot{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid var(--line)}
.meta{font-size:12px;color:var(--sub);margin:0}
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:13px;border-radius:999px;padding:7px 16px;white-space:nowrap}
.btn:hover{background:var(--accent-strong)}
.btn.ghost{background:none;color:var(--ink);border:1px solid var(--line-strong)}.btn.ghost:hover{border-color:var(--ink)}
.empty{color:var(--sub);padding:40px 0}
.doc-wrap{max-width:820px}
.crumb{font-size:13px;color:var(--sub);padding-top:28px}.crumb a{text-decoration:none}.crumb a:hover{color:var(--accent)}
.doc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:24px 0 8px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.doc h1{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:clamp(26px,5vw,36px);line-height:1.3;margin:24px 0}
.doc h2{font-family:"Zen Kaku Gothic New",sans-serif;font-size:22px;margin:48px 0 14px;padding-left:12px;border-left:4px solid var(--accent);line-height:1.4}
.doc h3{font-size:17px;margin:28px 0 10px}
.doc ul,.doc ol{padding-left:1.4em}
.doc code{background:var(--soft);border-radius:4px;padding:1px 5px;font-size:.9em}
.doc blockquote{margin:16px 0;padding:8px 16px;border-left:3px solid var(--line-strong);color:var(--sub)}
.tbl{overflow-x:auto;margin:14px 0;border:1px solid var(--line-strong);border-radius:10px}
.doc table{border-collapse:collapse;width:100%;font-size:14px;line-height:1.6}
.doc th,.doc td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.doc th{background:var(--soft);font-weight:700;white-space:nowrap}
.doc tr:last-child td{border-bottom:0}
.doc td:first-child{white-space:nowrap}
.doc-foot{display:flex;gap:10px;flex-wrap:wrap;margin:48px 0 16px;padding-top:24px;border-top:1px solid var(--line)}
.foot{border-top:1px solid var(--line);margin-top:64px;padding:24px 0;font-size:12px;color:var(--sub)}
@media (max-width:480px){.grid{grid-template-columns:1fr}.hero{padding-top:40px}}
.doc h1{scroll-margin-top:76px}.doc h2,.doc h3{scroll-margin-top:76px}
.doc h1:not(:first-child){font-size:clamp(22px,4vw,28px);margin:72px 0 16px;padding-top:24px;border-top:2px solid var(--ink)}
.doc hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.doc pre{background:#16181c;color:#e8e9eb;border-radius:10px;padding:16px;overflow-x:auto;font-size:13px;line-height:1.6}
.doc pre code{background:none;padding:0;color:inherit}
.doc li:has(>input[type=checkbox]){list-style:none;margin-left:-1.2em}.doc input[type=checkbox]{margin-right:6px;accent-color:var(--accent)}

/* hero */
.hero-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:28px 0 0}
.hero-cta .count{margin:0}
.btn.lg{font-size:15px;padding:12px 24px}
.btn.sm{font-size:12px;padding:5px 12px}
.small-hero{padding-bottom:8px}
.flow{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.flow li{position:relative;background:var(--soft);border-radius:12px;padding:14px 12px 12px;font-size:13px;line-height:1.5;font-weight:700}
.flow li b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;margin-bottom:6px}
.flow li span{display:block}
.flow li.opt{background:none;border:1.5px dashed var(--line-strong)}
.flow li.opt b{background:var(--gpt)}
.flow li em{position:absolute;top:10px;right:10px;font-style:normal;font-size:11px;color:var(--gpt);font-weight:700}
.flow li i{font-style:normal;display:inline-block}
.nb{display:inline-block}
@media (max-width:720px){.flow{grid-template-columns:1fr}.flow li{display:flex;align-items:center;gap:12px;padding:12px 14px}.flow li b{margin:0;flex:none}.flow li em{position:static;margin-left:auto}}
.card-actions{display:flex;gap:6px}
.steps-count{margin:10px 0 0!important;font-size:12px!important;color:var(--accent)!important;font-weight:700}

/* app page */
.app-head{margin:20px 0 0}
.app-head h1{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:clamp(30px,6vw,42px);line-height:1.25;margin:6px 0 8px}
.app-head .meta{margin-top:8px}
.tabs{display:flex;gap:4px;margin:28px 0 0;border-bottom:1px solid var(--line-strong);position:sticky;top:60px;background:#fff;z-index:4}
.tabs button{appearance:none;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;padding:12px 16px;font:700 15px/1 "Noto Sans JP",sans-serif;color:var(--sub);cursor:pointer}
.tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)}
.tab-panel{padding-top:8px}
.spec-bar{display:flex;justify-content:flex-end;margin:16px 0 0}
.steps{list-style:none;padding:0;margin:24px 0 0;counter-reset:step}
.step{position:relative;counter-increment:step;padding:0 0 36px 52px;border-left:2px solid var(--line);margin-left:17px;padding-left:34px}
.step:last-child{border-left-color:transparent}
.step::before{content:counter(step);position:absolute;left:-18px;top:-2px;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font:900 15px/1 "Zen Kaku Gothic New",sans-serif}
.step.optional::before{background:#fff;color:var(--gpt);border:2px solid var(--gpt);width:30px;height:30px}
.step h3{font-family:"Zen Kaku Gothic New",sans-serif;font-size:19px;margin:2px 0 10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.step p{margin:8px 0}
.badge{font-size:11px;font-weight:700;font-style:normal;color:var(--gpt);border:1px solid var(--gpt);border-radius:999px;padding:1px 9px;font-family:"Noto Sans JP",sans-serif;letter-spacing:0}
.small{font-size:13px;color:var(--sub)}
.note{font-size:13px;background:var(--soft);border-radius:10px;padding:10px 14px;color:var(--sub)}
code{background:var(--soft);border-radius:4px;padding:1px 6px;font:500 .88em "JetBrains Mono",ui-monospace,monospace}
.phases details{border:1px solid var(--line-strong);border-radius:12px;margin:10px 0;overflow:hidden}
.phases summary{cursor:pointer;list-style:none;display:flex;gap:12px;align-items:baseline;padding:12px 16px;font-size:14px}
.phases summary::-webkit-details-marker{display:none}
.phases summary::after{content:"＋";margin-left:auto;color:var(--sub)}
.phases details[open] summary::after{content:"－"}
.phases details[open] summary{border-bottom:1px solid var(--line)}
.phase-label{font:700 12px/1.6 "JetBrains Mono",monospace;color:var(--accent);white-space:nowrap}
.phase-name{font-weight:700}
.phases .prompt{margin:12px}
.to-guide{margin:8px 0 0;font-size:14px;color:var(--sub)}
.to-guide a,.step a:not(.btn),.guide a:not(.btn){color:var(--accent-strong)}

/* prompt block */
.prompt{margin:14px 0;border-radius:12px;overflow:hidden;background:var(--code-bg);color:var(--code-ink)}
.prompt-head{display:flex;justify-content:space-between;align-items:center;padding:8px 10px 8px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.prompt .to{font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px;color:#fdb68a}
.prompt .to::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.prompt.gpt .to{color:#7fdcbf}.prompt.gpt .to::before{background:var(--gpt)}
.prompt.plain .to{color:#b8bcc4}.prompt.plain .to::before{background:#8a8f98}
.copy{appearance:none;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;border-radius:8px;padding:4px 12px;font:700 12px/1.4 "Noto Sans JP",sans-serif;cursor:pointer}
.copy:hover{background:rgba(255,255,255,.1)}
.copy.done{background:var(--accent);border-color:var(--accent)}
.prompt pre{margin:0;padding:14px 16px 16px;white-space:pre-wrap;word-break:break-word;font:14px/1.75 "Noto Sans JP",system-ui,sans-serif}


/* guide */
.guide{max-width:820px}
.toc{border:1px solid var(--line-strong);border-radius:14px;padding:16px 22px;margin:36px 0 8px}
.toc p{margin:0 0 6px;font-weight:700;font-size:13px;color:var(--sub)}
.toc ol{margin:0;padding-left:1.4em;columns:2;column-gap:28px;font-size:14px}
.toc a{text-decoration:none}.toc a:hover{color:var(--accent)}
@media (max-width:560px){.toc ol{columns:1}}
.g-sec{margin:56px 0 0;scroll-margin-top:76px}
.g-sec h2{font-family:"Zen Kaku Gothic New",sans-serif;font-size:24px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.g-sec h2>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font-size:15px;flex:none}
.g-sec h2 .badge{font-size:12px}
.plain{border-collapse:collapse;width:100%;font-size:14px;margin:10px 0}
.plain th,.plain td{border-top:1px solid var(--line);padding:12px 10px;text-align:left;vertical-align:top}
.plain th{white-space:nowrap;width:1%;padding-right:20px}
@media (max-width:560px){.plain th,.plain td{display:block;width:auto;border:0;padding:4px 0}.plain tr{display:block;border-top:1px solid var(--line);padding:10px 0}}
.sub{padding-left:1.4em}.sub li{margin:6px 0}
.callout{background:var(--accent-tint);border-radius:12px;padding:14px 18px;font-size:14px;margin:16px 0}
.callout.warn{background:#fff6e0}
.more{margin:12px 0;border:1px solid var(--line);border-radius:12px;padding:10px 16px}
.more summary{cursor:pointer;font-weight:700;font-size:14px}
.faq details{border-top:1px solid var(--line);padding:14px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:700}
.app-links{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.app-links a{display:block;border:1px solid var(--line-strong);border-radius:999px;padding:6px 14px;font-size:14px;text-decoration:none;color:var(--ink)!important}
.app-links a:hover{border-color:var(--accent)}
@media (max-width:480px){.step{padding-left:26px}.tabs button{padding:12px 10px;font-size:14px}}
.doc :not(pre)>code,.step code,.guide :not(pre)>code{overflow-wrap:anywhere;word-break:break-word}
.doc a{overflow-wrap:anywhere}
.doc :not(pre)>code,.step code,.guide :not(pre)>code{overflow-wrap:anywhere;word-break:break-word}
.doc a{overflow-wrap:anywhere}
/* consult CTA */
.cta{background:#1f2328;color:#fff;margin-top:72px;padding:56px 0}
.cta .eyebrow{color:#fdb68a}
.cta h2{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:clamp(24px,5vw,34px);line-height:1.35;margin:8px 0 10px}
.cta-lead{color:#c9ccd1;margin:0 0 28px}
.cta-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:16px}
.cta-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:24px}
.cta-box.main{background:#fff;color:var(--ink);border-color:#fff}
.cta-box h3{margin:0 0 6px;font-family:"Zen Kaku Gothic New",sans-serif;font-size:19px}
.cta-box p{margin:0 0 18px;font-size:14px;color:#c9ccd1}
.cta-box.main p{color:var(--sub)}
.cta-btns{display:flex;flex-wrap:wrap;gap:10px}
.cta .btn.ghost{color:#fff;border-color:rgba(255,255,255,.35)}.cta .btn.ghost:hover{border-color:#fff}
.btn.line{background:#06c755}.btn.line:hover{background:#05a948}
.cta-box.main .btn{width:100%;justify-content:center}
.cta-inline{font-size:14px;background:var(--accent-tint);border-radius:10px;padding:10px 14px;margin:12px 0}
.cta-inline a{color:var(--accent-strong);font-weight:700}
.foot{margin-top:0}
@media (max-width:720px){.cta-grid{grid-template-columns:1fr}.cta{padding:44px 0}.cta-btns .btn{flex:1 1 auto;justify-content:center}}
.cta{scroll-margin-top:60px}
/* helpdock: always-visible consult */
.helpdock{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:20;transition:opacity .2s,transform .2s}
.helpdock.is-away{opacity:0;transform:translateY(12px);pointer-events:none}
.hd-panel{position:relative;width:236px;background:#1f2328;color:#fff;border-radius:14px;padding:12px 14px 10px;box-shadow:0 10px 32px rgba(0,0,0,.22)}
.hd-close{position:absolute;top:6px;right:8px;appearance:none;border:0;background:none;color:#9aa0a8;font-size:20px;line-height:1;padding:6px;cursor:pointer}
.hd-close:hover{color:#fff}
.hd-title{margin:0 18px 0 0;font:700 14px/1.5 "Zen Kaku Gothic New",sans-serif}
.hd-sub{margin:0 0 10px;font-size:12px;line-height:1.6;color:#c9ccd1}
.hd-btns{display:grid;gap:8px}
.hd-btns{gap:6px}.hd-btns .btn{justify-content:center;padding:8px 8px;font-size:12.5px}
.hd-form{display:block;text-align:center;margin-top:6px;font-size:12px;color:#c9ccd1}
.hd-pill{display:none;appearance:none;border:0;cursor:pointer;align-items:center;gap:6px;background:#1f2328;color:#fff;border-radius:999px;padding:12px 18px;font:700 14px/1 "Noto Sans JP",sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.22)}
.helpdock.is-mini .hd-panel{display:none}
.helpdock.is-mini .hd-pill{display:inline-flex}
@media (max-width:720px){
  .helpdock{left:0;right:0;bottom:0}
  .helpdock.is-mini{left:auto;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .hd-panel{width:auto;border-radius:16px 16px 0 0;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
  .hd-close{top:4px;right:6px}
  .hd-title{font-size:13px;margin:0 28px 6px 0;white-space:normal}
  .hd-sub,.hd-form,.hd-long{display:none}
  .hd-btns{grid-template-columns:1fr 1fr}
  body.has-dock{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}
/* demo → production */
.prod-note{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin:16px 0 0;padding:10px 14px;border-radius:10px;background:#fff6e0;text-decoration:none;font-size:13px;color:var(--ink)}
.prod-note b{white-space:nowrap}
.prod-note span{color:var(--sub)}
.prod-note::after{content:"→";margin-left:auto;color:var(--accent-strong);font-weight:700}
.spec-bar{align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between}
.spec-note{margin:0;font-size:13px;color:var(--sub)}.spec-note a{color:var(--accent-strong);font-weight:700}
.prod{background:var(--soft);margin-top:64px;padding:56px 0;scroll-margin-top:60px}
.prod-in{max-width:1080px;margin:0 auto;padding-inline:20px}
.prod h2{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:clamp(24px,5vw,34px);line-height:1.35;margin:8px 0 10px}
.prod>.prod-in>.lead{max-width:720px}
.gaps{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gaps li{background:#fff;border:1px solid var(--line-strong);border-radius:14px;padding:18px}
.gaps h3{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-family:"Zen Kaku Gothic New",sans-serif;font-size:16px;line-height:1.4}
.gaps h3 b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;flex:none}
.gaps dl{margin:0;font-size:13px;line-height:1.7}
.gaps dt{font-size:11px;font-weight:700;color:var(--sub);letter-spacing:.04em}
.gaps dt.p{color:var(--accent-strong);margin-top:10px}
.gaps dd{margin:2px 0 0}
@media (max-width:960px){.gaps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.gaps{grid-template-columns:1fr}}
.prod-cta{margin-top:28px;background:#fff;border:1px solid var(--line-strong);border-radius:18px;padding:24px;display:grid;gap:18px}
.prod-cta-text{display:grid;grid-template-columns:1fr 1fr;gap:4px 32px;align-items:start}
.prod-cta-text h3,.prod-cta-text>p:first-of-type{grid-column:1}.prod-cta-text .checks{grid-column:2;grid-row:1/span 3;margin:4px 0 0}.prod-cta-text .small{grid-column:1}
.prod-cta-text h3{margin:0 0 8px;font-family:"Zen Kaku Gothic New",sans-serif;font-size:20px}
.prod-cta-text p{margin:0 0 12px;font-size:14px}
.checks{list-style:none;padding:0;margin:0 0 12px;font-size:14px}
.checks li{position:relative;padding-left:24px;margin:6px 0}
.checks li::before{content:"";position:absolute;left:2px;top:7px;width:12px;height:7px;border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);transform:rotate(-45deg)}
.embed{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff;min-width:0}
.embed iframe{display:block;width:100%;height:800px;border:0}
.prod-alt{margin:0;font-size:13px;color:var(--sub)}
.prod-alt a{color:var(--accent-strong);font-weight:700}
@media (max-width:860px){.prod-cta{padding:18px}.prod-cta-text{grid-template-columns:1fr}.prod-cta-text .checks{grid-column:1;grid-row:auto}.embed iframe{height:1060px}}
.prod-band{margin:56px 0 0;padding:28px;border-radius:18px;background:#1f2328;color:#fff;display:grid;grid-template-columns:1fr auto;gap:18px 28px;align-items:center}
.prod-band .eyebrow{color:#fdb68a}
.prod-band h2{margin:6px 0;font-family:"Zen Kaku Gothic New",sans-serif;font-size:22px}
.prod-band p{margin:0;color:#c9ccd1;font-size:14px}
.prod-band ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px;grid-column:1/-1;order:3}
.prod-band li{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border-radius:999px;padding:6px 14px 6px 6px;font-size:13px;font-weight:700}
.prod-band li b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);font-size:11px}
@media (max-width:720px){.prod-band{grid-template-columns:1fr}.prod-band .btn{justify-content:center}}
/* スマホでは埋め込みカレンダーを画面の端から端まで使う（Lark の画面は枠が狭いと右が切れる） */
@media (max-width:560px){
  .prod-cta{margin-inline:-20px;width:calc(100% + 40px);border-radius:0;border-inline:0;padding:20px 0}
  .prod-cta-text,.prod-alt{padding-inline:20px}
  .embed{border-radius:0;border-inline:0}
}
</style></head>
<body>
<header class="top"><div class="wrap"><a class="brand" href="./"><svg viewBox="0 0 40 40" width="28" height="28" aria-hidden="true"><path d="M27.5 9.5c-4.2-2.6-9 .3-11.6 4.2-2.4 3.6-6.2 6.2-9.4 4.5" fill="none" stroke="var(--accent)" stroke-width="4.6" stroke-linecap="round"/><path d="M12.5 30.5c4.2 2.6 9-.3 11.6-4.2 2.4-3.6 6.2-6.2 9.4-4.5" fill="none" stroke="var(--accent)" stroke-width="4.6" stroke-linecap="round"/><circle cx="30.5" cy="10.5" r="4.4" fill="var(--accent)"/><circle cx="9.5" cy="29.5" r="4.4" fill="var(--accent)"/></svg><span><b>SOUZOH</b><small>SPECS</small></span></a>
<nav class="nav"><a href="./">要件定義書</a><a href="./guide/">作り方ガイド</a><a class="ext" href="https://gallery.souzoh.app/showcase">デモを触る</a></nav></div></header>
<main class="wrap">
<div class="hero"><p class="eyebrow">BUILD WITH CLAUDE</p><h1><span class="nb">要件定義書から、</span><span class="nb">自分の Claude で</span><span class="nb">アプリをつくる</span></h1>
<p class="lead">ソウゾウがつくったアプリの要件定義書を公開しています。ダウンロードして Claude Code に渡し、「作って」と頼めば、同じアプリを自分の手元でつくれます。<br>送る文はアプリごとにコピーできるようにしました。デザインにこだわりたい人は、先に ChatGPT で画面イメージを作って一緒に渡します。</p>
<ol class="flow">
<li><b>1</b><span><i>要件定義書を</i><i>ダウンロード</i></span></li>
<li class="opt"><b>2</b><span><i>ChatGPT で</i><i>画面イメージを作る</i></span><em>任意</em></li>
<li><b>3</b><span><i>Claude Code に渡して</i><i>「作って」と頼む</i></span></li>
<li><b>4</b><span><i>動かして</i><i>確かめる・直す</i></span></li>
</ol>
<p class="hero-cta"><a class="btn lg" href="guide/">作り方ガイドを読む</a><span class="count">要件定義書 16件</span></p></div>
<section class="cat"><h2>業務システム<span>8件</span></h2><div class="grid">
<article class="card">
  <a class="card-main" href="relate/"><h3>顧客・商談管理</h3><p>Excelをやめられる、中小企業のための顧客・商談管理システム</p>
  <ul class="tags"><li>顧客管理</li><li>商談</li><li>帳票</li></ul>
</a>
  <div class="card-foot"><span class="meta">v1.0・2026-08-13</span>
  <span class="card-actions"><a class="btn ghost sm" href="relate/">つくり方</a><a class="btn sm" href="/md/relate.md" download="顧客・商談管理_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>MD</a></span></div>
</article>
<article class="card">
  <a class="card-main" href="fieldpin/"><h3>地図・訪問記録</h3><p>訪問先を地図で管理し、GPSで訪問を記録する</p>
  <ul class="tags"><li>地図</li><li>GPS</li><li>訪問管理</li></ul>
</a>
  <div class="card-foot"><span class="meta">v1.0・2026-08-17</span>
  <span class="card-actions"><a class="btn ghost sm" href="fieldpin/">つくり方</a><a class="btn sm" href="/md/fieldpin.md" download="地図・訪問記録_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>MD</a></span></div>
</article>
<article class="card">
  <a class="card-main" href="portal/"><h3>社内ポータル</h3><p>会社の「いま」が、ひと目で分かるダッシュボード型ポータル</p>
  <ul class="tags"><li>社内ポータル</li><li>ダッシュボード</li><li>情報共有</li></ul>
</a>
  <div class="card-foot"><span class="meta"></span>
  <span class="card-actions"><a class="btn ghost sm" href="portal/">つくり方</a><a class="btn sm" href="/md/portal.md" download="社内ポータル_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>MD</a></span></div>
</article>
<article class="card">
  <a class="card-main" href="tsumu/"><h3>タスク管理</h3><p>3秒で積む。今日／リスト／ボード／カレンダーの4つの見え方で捌く</p>
  <ul class="tags"><li>タスク管理</li><li>カンバン</li><li>カレンダー</li></ul>
</a>
  <div class="card-foot"><span class="meta">v1.0・2026-08-24</span>
  <span class="card-actions"><a class="btn ghost sm" href="tsumu/">つくり方</a><a class="btn sm" href="/md/tsumu.md" download="タスク管理_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>MD</a></span></div>
</article>
<article class="card">
  <a class="card-main" href="tenken/"><h3>点検・チェックリスト</h3><p>1項目、1タップ、0.8秒。紙より速い点検表と、異常の是正追跡</p>
  <ul class="tags"><li>点検</li><li>チェックリスト</li><li>現場</li></ul>
</a>
  <div class="card-foot"><span class="meta">v1.0・2026-08-24</span>
  <span class="card-actions"><a class="btn ghost sm" href="tenken/">つくり方</a><a class="btn sm" href="/md/tenken.md" download="点検・チェックリスト_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>MD</a></span></div>
</article>
<article class="card">
  <a class="card-main" href="hibi/"><h3>日報・週報</h3><p>書く時間を、90秒に。前回をコピーして変わった分だけ直す日報</p>
  <ul class="tags"><li>日報</li><li>週報</li><li>振り返り</li></ul>
</a>
  <div class="card-foot"><span class="meta">v1.0・2026-08-24</span>
  <span class="card-actions"><a class="btn ghost sm" href="hibi/">つくり方</a><a class="btn sm" href="/md/hibi.md" download="日報・週報_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>MD</a></span></div>
</article>
<article class="card">
  <a class="card-main" href="kura/"><h3>在庫管理</h3><p>在庫数は、書き換えない。入出庫の履歴から積み上げる</p>
  <ul class="tags"><li>在庫管理</li><li>入出庫</li><li>棚卸</li></ul>
</a>
  <div class="card-foot"><span class="meta">v2.0・2026-08-24</span>
  <span class="card-actions"><a class="btn ghost sm" href="kura/">つくり方</a><a class="btn sm" href="/md/kura.md" download="在庫管理_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>MD</a></span></div>
</article>
<article class="card">
  <a class="card-main" href="tokiwa/"><h3>勤怠・シフト管理</h3><p>打刻は書き換えない。丸めも残業も、毎回そこから計算する</p>
  <ul class="tags"><li>勤怠管理</li><li>シフト</li><li>打刻</li></ul>
</a>
  <div class="card-foot"><span class="meta">v1.0・2026-08-24</span>
  <span class="card-actions"><a class="btn ghost sm" href="tokiwa/">つくり方</a><a class="btn sm" href="/md/tokiwa.md" download="勤怠・シフト管理_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>MD</a></span></div>
</article></div></section>
<section class="cat"><h2>一般向けアプリ<span>8件</span></h2><div class="grid">
<article class="card">
  <a class="card-main" href="hirebase/"><h3>求人・スカウト</h3><p>スカウトが届く、新しい求人体験のデモ</p>
  <ul class="tags"><li>求人</li><li>スカウト</li><li>マッチング</li></ul>
</a>
  <div class="card-foot"><span class="meta">v2.0・2026-08-13</span>
  <span class="card-actions"><a class="btn ghost sm" href="hirebase/">つくり方</a><a class="btn sm" href="/md/hirebase.md" download="求人・スカウト_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>MD</a></span></div>
</article>
<article class="card">
  <a class="card-main" href="casta/"><h3>動画配信</h3><p>会員制の動画配信プラットフォームのデモ</p>
  <ul class="tags"><li>動画配信</li><li>会員制</li><li>サブスク</li></ul>
</a>
  <div class="card-foot"><span class="meta">v1.0・2026-08-17</span>
  <span class="card-actions"><a class="btn ghost sm" href="casta/">つくり方</a><a class="btn sm" href="/md/casta.md" download="動画配信_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>MD</a></span></div>
</article>
<article class="card">
  <a class="card-main" href="kanade/"><h3>音楽配信</h3><p>画面を消しても止まらない、音楽配信アプリのデモ</p>
  <ul class="tags"><li>音楽配信</li><li>プレイヤー</li><li>サブスク</li></ul>
</a>
  <div class="card-foot"><span class="meta">v1.0・2026-08-17</span>
  <span class="card-actions"><a class="btn ghost sm" href="kanade/">つくり方</a><a class="btn sm" href="/md/kanade.md" download="音楽配信_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>MD</a></span></div>
</article>
<article class="card">
  <a class="card-main" href="sns/"><h3>SNS</h3><p>投稿・いいね・フォローの、基本がそろったSNSアプリのデモ</p>
  <ul class="tags"><li>SNS</li><li>投稿</li><li>テンプレート</li></ul>
</a>
  <div class="card-foot"><span class="meta"></span>
  <span class="card-actions"><a class="btn ghost sm" href="sns/">つくり方</a><a class="btn sm" href="/md/sns.md" download="SNS_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>MD</a></span></div>
</article>
<article class="card">
  <a class="card-main" href="match/"><h3>マッチング</h3><p>「できる」と「借りたい」で人をつなぐ共創マッチング</p>
  <ul class="tags"><li>マッチング</li><li>スキル</li><li>コミュニティ</li></ul>
</a>
  <div class="card-foot"><span class="meta"></span>
  <span class="card-actions"><a class="btn ghost sm" href="match/">つくり方</a><a class="btn sm" href="/md/match.md" download="マッチング_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>MD</a></span></div>
</article>
<article class="card">
  <a class="card-main" href="market/"><h3>フリマ</h3><p>使わなくなったものに、次の人を。C2Cフリマのデモ</p>
  <ul class="tags"><li>フリマ</li><li>C2C</li><li>決済</li></ul>
</a>
  <div class="card-foot"><span class="meta"></span>
  <span class="card-actions"><a class="btn ghost sm" href="market/">つくり方</a><a class="btn sm" href="/md/market.md" download="フリマ_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>MD</a></span></div>
</article>
<article class="card">
  <a class="card-main" href="delivery/"><h3>デリバリー</h3><p>注文から到着まで、配達が進む様子がリアルタイムに見える</p>
  <ul class="tags"><li>デリバリー</li><li>注文</li><li>配達追跡</li></ul>
</a>
  <div class="card-foot"><span class="meta"></span>
  <span class="card-actions"><a class="btn ghost sm" href="delivery/">つくり方</a><a class="btn sm" href="/md/delivery.md" download="デリバリー_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>MD</a></span></div>
</article>
<article class="card">
  <a class="card-main" href="reviews/"><h3>口コミ・レビュー</h3><p>星の数より、その中身を。評価の理由が見えるレビュー</p>
  <ul class="tags"><li>口コミ</li><li>評価</li><li>店舗</li></ul>
</a>
  <div class="card-foot"><span class="meta"></span>
  <span class="card-actions"><a class="btn ghost sm" href="reviews/">つくり方</a><a class="btn sm" href="/md/reviews.md" download="口コミ・レビュー_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>MD</a></span></div>
</article></div></section>



<section class="prod-band"><div><p class="eyebrow">FROM DEMO TO PRODUCTION</p><h2>作ったアプリを、本番で使いたい方へ</h2>
<p>ここの要件定義書はデモです。本番で使うには、あと4つ必要です。</p></div>
<ol><li><b>1</b>データの保存</li><li><b>2</b>セキュリティ</li><li><b>3</b>ガバナンス（運用ルール）</li><li><b>4</b>公開・デプロイ</li></ol>
<a class="btn lg" href="guide/#production">本番に必要なことと、相談の日程</a></section>
</main>
<section class="cta" id="consult"><div class="wrap">
<p class="eyebrow">FREE CONSULTATION</p>
<h2><span class="nb">分からないときは、</span><span class="nb">お気軽に</span><span class="nb">30分無料相談へ</span></h2>
<p class="cta-lead">途中で止まった、エラーが消えない、自社向けに作り変えたい。どんなことでも大丈夫です。</p>
<div class="cta-grid">
<div class="cta-box main"><h3>日程を決めて話す</h3><p>代表の西澤と直接お話しできます。空いている日時を選ぶだけで予約できます。</p>
<a class="btn lg" href="https://vszh6zudz50.jp.larksuite.com/scheduler/e7fecdad1a756dbe" target="_blank" rel="noopener">代表 西澤と話す日程を選ぶ</a></div>
<div class="cta-box"><h3>まずは問い合わせる</h3><p>要件定義書がほしい方・ご相談は公式LINEから。メールでのお問い合わせはフォームから。</p>
<div class="cta-btns"><a class="btn line" href="https://lin.ee/UNwvWjp" target="_blank" rel="noopener">公式LINEで相談する</a><a class="btn ghost" href="https://service.souzoh-official.com/contact/" target="_blank" rel="noopener">お問い合わせフォーム</a></div></div>
</div></div></section>
<footer class="foot"><div class="wrap">© SOUZOH LLC.</div></footer>
<aside class="helpdock" data-helpdock aria-label="相談窓口">
<div class="hd-panel">
<button type="button" class="hd-close" data-hd-toggle aria-label="小さくする">×</button>
<p class="hd-title"><span class="nb">つまずいたら、</span><span class="nb">気軽に聞いてください</span></p>
<p class="hd-sub">LINEなら1通送るだけ。</p>
<div class="hd-btns"><a class="btn line" href="https://lin.ee/UNwvWjp" target="_blank" rel="noopener">LINEで聞く</a><a class="btn" href="https://vszh6zudz50.jp.larksuite.com/scheduler/e7fecdad1a756dbe" target="_blank" rel="noopener"><span>30分無料相談<span class="hd-long">の日程を選ぶ</span></span></a></div>
<a class="hd-form" href="https://service.souzoh-official.com/contact/" target="_blank" rel="noopener">お問い合わせフォーム</a>
</div>
<button type="button" class="hd-pill" data-hd-toggle><svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M4 5h16v11H9l-5 4z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>相談する</button>
</aside>
<script>(function () {
  // プロンプトのコピー
  document.addEventListener("click", function (e) {
    var btn = e.target.closest(".copy");
    if (!btn) return;
    var pre = btn.closest(".prompt").querySelector("pre");
    var text = pre.innerText.replace(/\n{3,}/g, "\n\n").trim();
    var done = function () {
      btn.textContent = "コピーしました";
      btn.classList.add("done");
      setTimeout(function () { btn.textContent = "コピー"; btn.classList.remove("done"); }, 1600);
    };
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(text).then(done, function () { fallback(pre); done(); });
    } else { fallback(pre); done(); }
  });
  function fallback(pre) {
    var r = document.createRange(); r.selectNodeContents(pre);
    var s = getSelection(); s.removeAllRanges(); s.addRange(r);
    try { document.execCommand("copy"); } catch (e) {}
    s.removeAllRanges();
  }

  // つくり方／要件定義書のタブ。本文の見出しへのリンク（#…）で来たときは要件定義書側を開く
  var tabs = document.querySelectorAll("[data-tab]");
  if (!tabs.length) return;
  function show(name) {
    tabs.forEach(function (t) { t.setAttribute("aria-selected", t.dataset.tab === name ? "true" : "false"); });
    document.getElementById("tab-build").hidden = name !== "build";
    document.getElementById("tab-spec").hidden = name !== "spec";
  }
  function fromHash() {
    var id = decodeURIComponent(location.hash.slice(1));
    if (id === "spec") return show("spec");
    var el = id && document.getElementById(id);
    show(el && el.closest("#tab-spec") ? "spec" : "build");
    if (el) el.scrollIntoView();
  }
  tabs.forEach(function (t) {
    t.addEventListener("click", function () {
      show(t.dataset.tab);
      history.replaceState(null, "", t.dataset.tab === "spec" ? "#spec" : location.pathname);
      document.querySelector(".tabs").scrollIntoView({ block: "start" });
    });
  });
  window.addEventListener("hashchange", fromHash);
  fromHash();
})();

// 相談窓口：たたむ／ひらく（この端末だけ覚える）。下の大きな相談ブロックが見えている間は隠す
(function () {
  var dock = document.querySelector("[data-helpdock]");
  if (!dock) return;
  var KEY = "souzoh-specs-helpdock";
  var mini = false;
  try { mini = localStorage.getItem(KEY) === "mini"; } catch (e) {}
  dock.classList.toggle("is-mini", mini);
  document.body.classList.add("has-dock");
  dock.addEventListener("click", function (e) {
    if (!e.target.closest("[data-hd-toggle]")) return;
    mini = !mini;
    dock.classList.toggle("is-mini", mini);
    try { localStorage.setItem(KEY, mini ? "mini" : "open"); } catch (e) {}
  });
  // 相談の節（下の相談ブロック・本番の節）が見えている間は、同じ案内を二重に出さない
  var targets = ["consult", "production"].map(function (id) { return document.getElementById(id); }).filter(Boolean);
  if (targets.length && "IntersectionObserver" in window) {
    var seen = {};
    var io = new IntersectionObserver(function (es) {
      es.forEach(function (e) { seen[e.target.id] = e.isIntersecting; });
      dock.classList.toggle("is-away", Object.keys(seen).some(function (k) { return seen[k]; }));
    });
    targets.forEach(function (t) { io.observe(t); });
  }
})();
</script>
</body></html>